<template>
  <div class="source">
    <pageHeader :active="1" :bgColor="'#292c4d'"></pageHeader>
    <div class="page-content">
      <div class="mt70 add-source">
        <div
          class="source-img pr"
          @mouseenter="show = true"
          @mouseleave="show = false"
        >
          <img src="../../assets/images/addService.png" alt="" width="100%" />
          <div class="describe">入驻申请</div>
          <div class="modal" v-show="show">
            <div class="join-btn">
              <p class="cfff f16 mb10">提交使用反馈，获取专属服务</p>
              <el-button type="primary" size="small">立即反馈</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="header">
          <el-radio-group
            v-model="scene"
            @change="sceneChange($event)"
            fill="#292C4D"
            style="margin-bottom: 30px"
          >
            <el-radio-button
              v-for="item in sceneList"
              :key="item.id"
              :label="item.id"
              >{{ getSceneName(item.id) }}</el-radio-button
            >
          </el-radio-group>
        </div>
        <div class="naver">
          <!-- <div>&nbsp</div> -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>{{
              getSceneName(
                senceId != 0
                  ? senceId
                  : sceneList.length > 0
                  ? sceneList[0].id
                  : 0
              )
            }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{
              getProduceName(
                active != 0
                  ? active
                  : produceList.length > 0
                  ? produceList[0].id
                  : 0
              )
            }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{
              getModuleName(
                active2 != 0
                  ? active2
                  : moduleList.length > 0
                  ? moduleList[0].id
                  : 0
              )
            }}</el-breadcrumb-item>
          </el-breadcrumb>
          <el-button v-if="isLogin" size="small" @click="add(1)"
            >新增</el-button
          >
        </div>
        <div class="main">
          <div class="aside">
            <div class="nav">
              <div class="title">
                <img src="../../assets/images/theme.png" alt="" class="mr10" />
                产品
              </div>
              <div class="nav-list">
                <div
                  v-for="item in produceList"
                  :key="item.id"
                  class="nav-item"
                  @click="click(item.id)"
                  :class="active == item.id ? 'active' : ''"
                >
                  <div class="f14">{{ item.name }}</div>
                </div>
              </div>
            </div>
            <div class="nav">
              <div class="title">
                <img src="../../assets/images/system.png" alt="" class="mr10" />
                功能模块
              </div>
              <div class="nav-list">
                <div
                  v-for="item in moduleList"
                  :key="item.id"
                  class="nav-item"
                  @click="click2(item.id)"
                  :class="active2 == item.id ? 'active' : ''"
                >
                  <div class="f14">
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="list">
            <div
              class="item pt20"
              v-for="(item, index) in productIntroductionList"
              :key="index"
            >
              <div class="title">
                {{ item.name }}
                <div class="anniu">
                  <span v-if="isLogin" @click="edit(item)"> 编辑 </span>
                  <span v-if="isLogin">|</span>
                  <el-popconfirm
                    v-if="isLogin"
                    @confirm="del(item)"
                    title="是否要删除当前数据？"
                  >
                    <span slot="reference"> 删除 </span>
                  </el-popconfirm>
                </div>
              </div>
              <div class="remark">{{ item.introduction }}</div>
              <el-collapse v-model="item.activeNames">
                <el-collapse-item
                  v-if="item.interfaceRelList.length > 0"
                  title="数据接口"
                  name="3"
                >
                  <div
                    class="interface-item"
                    v-for="item in item.interfaceRelList"
                    :key="item.id"
                  >
                    <div class="interfaceHeader">
                      <p style="margin-right: 20px">
                        接口地址：{{ item.interfaceAddress }}
                      </p>
                      |
                      <p style="margin-left: 20px">
                        请求方式：{{ item.interfaceName }}
                      </p>
                    </div>
                    <p class="interfaceFooter">{{ item.desc }}</p>
                  </div>
                </el-collapse-item>
                <el-collapse-item
                  v-if="item.prototypeFileList"
                  title="原型图"
                  name="1"
                >
                  <!-- <el-image
                    v-for="img in item.prototypeFileList"
                    :key="img.id"
                    style="width: 60px; height: 60px; margin: 4px"
                    src="http://101.132.105.177:18080/upload/digital/file/198179301163008/1715419892266_Default_cute_c.png"
                    :fit="fit"
                  ></el-image> -->
                  <!-- v-for="img in item.prototypeFileList"
                    :key="img.id"
                    class="el-upload-list__item-thumbnail"
                    :src="img.absoluteUrl" -->
                  <!-- <img
                    v-for="img in item.prototypeFileList"
                    :key="img.id"
                    class="el-upload-list__item-thumbnail"
                    :src="`${origin}${img.url}`"
                    alt=""
                    style="width: 60px; height: 60px; margin: 4px"
                  /> -->
                  <el-image
                    v-for="img in getImgList(item.prototypeFileList)"
                    :key="img"
                    style="width: 60px; height: 60px; margin: 4px"
                    :src="img"
                    :preview-src-list="getImgList(item.prototypeFileList)"
                  >
                  </el-image>
                </el-collapse-item>
                <el-collapse-item
                  v-if="item.screenshotFileList"
                  title="软件截图"
                  name="2"
                >
                  <el-image
                    v-for="img in getImgList(item.screenshotFileList)"
                    :key="img"
                    style="width: 60px; height: 60px; margin: 4px"
                    :src="img"
                    :preview-src-list="getImgList(item.screenshotFileList)"
                  >
                  </el-image>
                  <!-- <img
                    v-for="img in item.screenshotFileList"
                    :key="img.id"
                    class="el-upload-list__item-thumbnail"
                    :src="`${origin}${img.url}`"
                    alt=""
                    style="width: 60px; height: 60px; margin: 4px"
                  /> -->
                </el-collapse-item>
              </el-collapse>
              <div class="pb20 flex j-between a-center bb1">
                <div>
                  <el-tag class="mr10" effect="dark" size="mini">{{
                    getTagName(item.productId)
                  }}</el-tag>
                  <el-tag class="mr10" effect="dark" size="mini">{{
                    getTagNameModule(item.subjectId)
                  }}</el-tag>
                  <el-tag
                    v-for="it in item.itemList"
                    :key="it"
                    class="mr10"
                    effect="dark"
                    size="mini"
                    >{{ it }}</el-tag
                  >
                </div>
                <div class="flex">
                  <div class="mr20">更新时间：{{ item.updateTime }}</div>
                  <div>发布时间：{{ item.createTime }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <pageFooter></pageFooter>
    <el-dialog
      :title="isAdd == 1 ? '新增子功能模块' : '编辑数据'"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="70%"
      class="dialog-box"
    >
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="110px"
      >
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="模块名称" prop="name">
              <el-input
                v-model="form.name"
                clearable
                placeholder="请输入"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属功能模块" prop="subjectId">
              <el-select
                v-model="form.subjectId"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in moduleList"
                  v-if="item.name != '全部'"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="功能介绍" prop="introduction">
          <el-input
            type="textarea"
            placeholder="请输入"
            :rows="3"
            clearable
            v-model="form.introduction"
          ></el-input>
        </el-form-item>

        <el-form-item label="原型图">
          <el-upload
            class="upload-demo"
            action=""
            multiple
            :auto-upload="false"
            :on-change="handleChange1"
            :on-remove="handleRemove1"
            :file-list="fileList1"
            list-type="picture"
          >
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="软件截图">
          <el-upload
            class="upload-demo"
            action=""
            multiple
            :auto-upload="false"
            :on-change="handleChange2"
            :on-remove="handleRemove2"
            :file-list="fileList2"
            list-type="picture"
          >
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="数据接口" prop="interface">
          <el-button
            size="small"
            type="primary"
            style="margin-bottom: 8px"
            @click="addTableRow"
            >新 增</el-button
          >
          <el-table
            :data="tableData"
            stripe
            highlight-current-row
            border
            ref="addTableRowRef"
            :header-cell-style="{
              fontSize: '14px',
              background: '#f0f0f0',
              color: '#333',
              height: '28px',
              padding: '2px'
            }"
            :row-style="{ height: '28px' }"
            :cell-style="{ padding: '4px' }"
          >
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="60"
            ></el-table-column>
            <el-table-column
              type="index"
              label="接口地址"
              align="center"
              width="300"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.interfaceAddress"
                  placeholder="请输入"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column
              type="index"
              label="请求方式"
              align="center"
              width="180"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.interfaceName"
                  placeholder="请输入"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column
              type="index"
              label="接口描述"
              align="center"
              width="380"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.desc"
                  placeholder="请输入"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" width="60" align="left">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDeleteRow(scope.$index, tableData)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="端" prop="itemIds">
              <el-select
                v-model="form.itemIds"
                placeholder="请选择"
                multiple
                clearable
              >
                <el-option
                  v-for="item in systemList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pageHeader from '@/components/pageHeader.vue'
import pageFooter from '@/components/pageFooter.vue'
// import uploadFile from '@/components/uploadFile.vue'
import {
  scene,
  product,
  getDataSubject,
  getProductIntroduction,
  getDict,
  saveProdIntro,
  delProdIntro,
  uplodeImg,
  preview,
  delImg,
  updateProdIntro
} from '@/api/sceneProduct' //api接口
import { mapGetters } from 'vuex'

export default {
  name: 'ProductIntroduction',
  computed: {
    // 获取状态管路设置的值
    ...mapGetters(['isLogin'])
  },
  data() {
    return {
      show: false,
      active: 0,
      url: 'http://101.132.105.177:18080/upload/digital/file/198179301163008/1715419892266_Default_cute_c.png',
      active2: 0,
      scene: '',
      origin: '',
      img1: true,
      img2: true,
      senceId: 0,
      fileList1: [],
      fileList2: [],
      fileListUp1: [],
      fileListUp2: [],
      sceneList: [],
      produceList: [],
      moduleList: [],
      systemList: [],
      tableData: [],
      isAdd: 1,
      dialogFormVisible: false,
      productIntroductionList: [],
      form: {},
      rules: {
        name: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ],
        productId: [
          {
            required: true,
            message: '请选择',
            trigger: 'blur'
          }
        ],
        subjectId: [
          {
            required: true,
            message: '请选择',
            trigger: 'blur'
          }
        ],
        introduction: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ],
        itemIds: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ]
      },
      // prototypeFileList: [
      //   'http://101.132.105.177/upload/digital/file/198179301163008/1715841963405_安全基础信息-证照信息.png',
      //   'http://101.132.105.177/upload/digital/file/198179301163008/1715841963406_安全基础信息-人员清单.png',
      //   'http://101.132.105.177/upload/digital/file/198179301163008/1715841963445_经营存储信息.png',
      //   'http://101.132.105.177/upload/digital/file/198179301163008/1715841963454_企业人员基础信息.png'
      // ]
    }
  },
  components: { pageHeader, pageFooter },

  created() {
    this.origin = window.location.origin
    this.initData()
  },

  methods: {
    getImgList(list) {
      const imgList = []
      list.forEach((item) => {
        imgList.push(`${this.origin}${item.url}`)
      })
      // console.log('图片列表',imgList);
      return imgList
    },
    addTableRow() {
      this.tableData.push({
        interfaceName: '',
        interfaceAddress: '',
        desc: ''
      })
    },
    handleDeleteRow(index, rows) {
      rows.splice(index, 1)
    },
    openImg(url) {
      preview({ fileUrl: url }).then((res) => {
        let type = url
          .substring(url.lastIndexOf('.') + 1, url.length)
          .toLowerCase()
        let docType = 'application/pdf'
        if (type == 'gif') {
          docType = 'image/gif'
        } else if (type == 'jpeg' || type == 'jpg') {
          docType = 'image/jpeg'
        } else if (type == 'png') {
          docType = 'image/png'
        }
        let binaryData = []
        binaryData.push(res)
        let pdfUrl = window.URL.createObjectURL(
          new Blob(binaryData, { type: docType })
        )
        window.open(pdfUrl)
      })
    },
    handleRemove1(file, fileList) {
      // console.log(file, fileList)
      this.fileList1 = fileList
      // if (file.id) {
      //   delImg(file.id).then((res) => {
      //     if (res.code == 0) {
      //       this.$message({
      //         message: '删除成功',
      //         type: 'success'
      //       })
      //       this.getProductIntroductionList(this.active, this.active2)
      //     }
      //   })
      // }
    },
    handleRemove2(file, fileList) {
      // console.log(file, fileList)
      this.fileList2 = fileList
    },
    handleChange1(file, fileList) {
      const formData = new FormData()
      formData.append('files', file.raw)
      uplodeImg(formData).then((res) => {
        if (res.code === 0) {
          this.fileListUp1.push(res.data[0])
          // console.log('file1', this.fileList1);
        }
      })
    },
    handleChange2(file, fileList) {
      const formData = new FormData()
      formData.append('files', file.raw)
      uplodeImg(formData).then((res) => {
        if (res.code === 0) {
          this.fileListUp2.push(res.data[0])
          // console.log('file1', this.fileList1);
        }
      })
    },
    getSceneName(id) {
      let name = ''
      this.sceneList.forEach((item) => {
        if (item.id == id) {
          name = item.name
        }
      })
      return name
    },
    getModuleName(id) {
      let name = ''
      this.moduleList.forEach((item) => {
        if (item.id == id) {
          name = item.name
        }
      })
      return name
    },
    getProduceName(id) {
      let name = ''
      this.produceList.forEach((item) => {
        if (item.id == id) {
          name = item.name
        }
      })
      return name
    },
    getTagNameModule(id) {
      let name = ''
      this.moduleList.forEach((item) => {
        if (item.id == id) {
          name = item.name
        }
      })
      return name
    },
    getTagName(parentId) {
      let name = ''
      this.produceList.forEach((item) => {
        if (item.id == parentId) {
          name = item.name
        }
      })
      return name
    },
    add(index) {
      this.form = {}
      this.tableData = []
      this.fileListUp1 = []
      this.fileListUp2 = []
      this.fileList1 = []
      this.fileList2 = []
      this.isAdd = index
      // this.$nextTick(() => {
      this.dialogFormVisible = true
      // })
    },

    edit(item) {
      this.form = {}
      this.isAdd = 2
      this.dialogFormVisible = true
      this.fileListUp1 = []
      this.fileListUp2 = []
      this.fileList1 = item.prototypeFileList || []
      this.fileList2 = item.screenshotFileList || []
      this.form = item
      this.tableData = item.interfaceRelList || []
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.productId = this.active
          // this.form.subjectId = this.active2
          this.form.prototypeFileIds = this.fileListUp1
          this.form.screenshotFileIds = this.fileListUp2
          this.form.interfaceList = this.tableData
          if (this.isAdd == '1') {
            // console.log(11)
            saveProdIntro(this.form).then((res) => {
              if (res.code == 0) {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
                this.getProductIntroductionList(
                  this.active,
                  this.active2 === 0 ? '' : this.active2
                )
              }
            })
          } else {
            // console.log(22)
            if (this.fileList1) {
              this.fileList1.forEach((item) => {
                if (item.id) {
                  this.form.prototypeFileIds.push(item.id)
                }
              })
            }
            if (this.fileList2) {
              this.fileList2.forEach((item) => {
                if (item.id) {
                  this.form.screenshotFileIds.push(item.id)
                }
              })
            }

            updateProdIntro(this.form, this.form.id).then((res) => {
              if (res.code == 0) {
                this.$message({
                  message: '更新成功',
                  type: 'success'
                })
                this.getProductIntroductionList(
                  this.active,
                  this.active2 === 0 ? '' : this.active2
                )
              }
            })
          }
          this.dialogFormVisible = false
          this.form = {}
          this.fileListUp1 = []
          this.fileListUp2 = []
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    sceneChange(e) {
      // console.log(e)
      this.moduleList = []
      this.produceList = []
      this.senceId = e
      this.productIntroductionList = []
      this.getProduceList()
    },

    click(active) {
      this.active = active
      this.getDataSubjectList(active)
      this.getProductIntroductionList(active, this.active2)
    },

    click2(active) {
      this.active2 = active
      this.getProductIntroductionList(this.active, active)
    },
    getDataSubjectList(pordId) {
      getDataSubject(pordId, 822746444562432).then((res) => {
        // console.log(res.data)
        this.moduleList = res.data || []
        if (this.moduleList) {
          // this.active2 = this.moduleList[0].id || ''
          this.moduleList.unshift({
            id: '',
            name: '全部'
          })
          this.getProductIntroductionList(pordId, '')
          // getProductIntroduction({
          //   productId: pordId,
          //   subjectId: this.active2
          // }).then((res) => {
          //   this.productIntroductionList = res.data || []
          // })
        }
      })
    },
    getProduceList() {
      product(this.scene).then((res) => {
        this.produceList = res.data || []
        if (this.produceList) {
          this.active = this.produceList[0].id || ''
          this.getDataSubjectList(this.active)
        }
      })
    },
    getProductIntroductionList(productId, subjectId) {
      const data = {
        productId: productId,
        subjectId: subjectId
      }
      getProductIntroduction(data).then((res) => {
        this.productIntroductionList = res.data || []
      })
    },
    del(item) {
      delProdIntro(item.id).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getProductIntroductionList(this.active, this.active2)
        }
      })
    },
    initData() {
      scene().then(async (res) => {
        // console.log('场景',res.data)
        this.sceneList = res.data || []

        this.scene = this.sceneList[0].id || ''
        this.getProduceList()
      })
      // if (this.isLogin) {
      getDict({ type: 'ProductIntroductionType' }).then((res) => {
        this.systemList = res.data || []
      })
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.source {
  margin-top: 70px;
  .page-content {
    min-height: calc(100vh - 300px);
  }
  .add-source {
    background: url('../../assets/images/recourse.png') no-repeat;
    padding-top: 50px;
    background-size: 100% 300px;
    height: 200px;
    overflow: hidden;
    min-width: 1200px;
    .source-img {
      width: 50%;
      margin: 0 auto;
      padding: 15px;
      background: #fff;
      height: 100%;
      .describe {
        position: absolute;
        top: 150px;
        right: 40px;
        font-size: 18px;
        color: #fff;
      }
      .modal {
        position: absolute;
        top: 15px;
        left: 15px;
        bottom: 15px;
        right: 15px;
        background: rgba(51, 51, 51, 0.7);
      }
      .join-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .add-box {
    width: 1200px;
    margin: 0 auto;
    height: 50px;
    line-height: 50px;
    text-align: right;
  }

  .content {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 50px;
    flex-direction: column;
    .header {
      margin: 10px 0 -10px 229px;
      display: flex;
      justify-content: start;
    }
    .naver {
      display: flex;
      justify-content: space-between;
      margin: -1px 0 10px 229px;
    }
    .main {
      display: flex;
      width: 1200px;
      margin: 0 auto;
      margin-bottom: 50px;
      .aside {
        width: 200px;
        margin-right: 30px;
        .nav {
          background: #efeff4;
          text-align: left;
          margin-bottom: 20px;
          &:last-child {
            margin-bottom: 0;
          }
          .title {
            height: 45px;
            display: flex;
            align-items: center;
            padding-left: 20px;
            background: #292c4d;
            color: #fff;
            font-size: 16px;
          }
          .nav-list {
            .nav-item {
              padding: 0 20px;
              height: 45px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              border-left: 4px solid #efeff4;
              transition: all 0.3s;
              cursor: pointer;
              .count {
                padding: 0 10px;
                background: #fff;
                border-radius: 20px;
                color: #57aeeb;
                font-size: 12px;
              }
              &:hover {
                border-left-color: #292c4d;
                color: #292c4d;
                font-weight: bold;
              }
              &:hover .count {
                background: #efeff4;
                color: #292c4d !important;
                font-weight: bold;
              }
            }
            .active {
              background: #d6e1f2;
              border-left-color: #292c4d !important;
              color: #292c4d !important;
              font-weight: bold !important;
              .count {
                background: #efeff4 !important;
                color: #292c4d !important;
                font-weight: bold !important;
              }
            }
          }
        }
      }
      .list {
        background: rgb(242, 247, 251);
        padding: 15px 0;
        flex: 1;
        .item {
          text-align: left;
          padding: 0 20px;
          .title {
            height: 28px;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 3px;

            .anniu {
              float: right;
              font-size: 12px;
              color: #0a6cff;

              span {
                cursor: pointer;
              }
            }
          }
          .remark {
            font-size: 12px;
            margin-bottom: 4px;
          }
          .bb1 {
            border-bottom: 1px dotted #d6e1f2;
            margin-top: 6px;
          }
          &:hover {
            // color: #0a6cff !important;
            border: 1px solid #0a6cff;
            background: #fff;
          }
        }
      }
    }
  }

  .dialog-box {
    text-align: left;
    .el-select {
      width: 100%;
    }
  }
  .prototypeFile {
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
    .imgHeader {
      display: flex;
      justify-content: start;
      align-items: center;
      p {
        margin-right: 3px;
      }
    }
  }
}
.interface-item {
  border-bottom: 1px solid #d6d5d5;
  padding: 6px 10px;
  .interfaceHeader {
    display: flex;
    justify-content: start;
  }
  .interfaceFooter {
    display: flex;
    justify-content: start;
  }
}
.interface-item :hover {
  color: #0a6cff;
}
</style>
<style>
.el-upload-list--picture .el-upload-list__item {
  width: 230px;
  margin-right: 10px;
}
.el-upload-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
}
.el-collapse {
  border: none;
}
.el-collapse-item__header {
  display: contents;
  align-items: center;
  height: 22px;
  line-height: 22px;
  background-color: #fff;
  /* color: #303133; */
  cursor: pointer;
  border-bottom: 1px solid #ebeef5;
  font-size: 13px;
  font-weight: 500;
  transition: border-bottom-color 0.3s;
  outline: 0;
}
.el-input__inner {
  font-size: 14px;
  height: 34px;
  line-height: 34px;
  outline: 0;
  padding: 0 2px;
  width: 100%;
}
.el-form-item {
  margin-bottom: 20px;
}
</style>
